<template>
    <view class="content">
        <view class="main">
            <view class="main-wrap">
                <block>
                    <view class="main-wrap-title">请完善个人信息</view>
                    <up-form labelPosition="left" :model="state.model" :rules="state.rules" ref="formRef">
                        <up-form-item label="姓名" prop="userInfo.fullName" borderBottom ref="item1" :labelWidth="100">
                            <up-input v-model="state.model.userInfo.fullName" :disabled="!state.isSave"
                                disabledColor="#ffffff" border="none" placeholder="请输入姓名"></up-input>
                        </up-form-item>
                        <!-- <up-line></up-line> -->
                        <up-form-item label="身份证" prop="userInfo.idCard" ref="item1" :labelWidth="100">
                            <up-input v-model="state.model.userInfo.idCard" :disabled="!state.isSave"
                                disabledColor="#ffffff" border="none" placeholder="请输入身份证号"></up-input>
                        </up-form-item>
                    </up-form>
                </block>
            </view>
            <view class="main-action">
                <up-button @click="submit" class="main-action-button"
                    :text="state.isSave?'保存':(state.model.userInfo.state?'审核通过':'审核中')"></up-button>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance()
// 使用 reactive 创建响应式状态  
const state = reactive({
    isSave: true,
    model: {
        userInfo: {
            fullName: '',
            idCard: '',
        },
    },
    rules: {
        'userInfo.fullName': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change'],
        },
        'userInfo.idCard': [
            {
                type: 'string',
                required: true,
                message: '请填写身份证',
                trigger: ['blur', 'change'],
            },
            {
                min: 18,
                max: 18,
                message: '不符合身份证号长度'
            }
        ]
    },
    radio: '',
    switchVal: false,
    current: 0
});


// 使用 ref 创建响应式引用  
const formRef = ref(null);


function submit() {
    if (!state.isSave) {
        uni.navigateBack()
        return
    }
    formRef.value?.validate().then(async (valid) => {
        if (valid) {
            uni.showLoading()
            const res = await proxy.request('/user/auth/save', state.model.userInfo, {
                methods: 'POST'
            })
            if (res.code == 200) {
                setTimeout(() => {
                    uni.$u.toast('保存成功')
                    formRef.value?.resetFields()
                    formRef.value?.clearValidate()
                    uni.hideLoading()
                    uni.navigateBack()
                }, 750);
            }

        } else {
            uni.$u.toast('请检查信息是否填写完整')
        }
    }).catch(() => {
        // 处理验证错误  
        uni.$u.toast('请检查信息是否填写完整')
    });
}

async function getSaveInfo() {
    const res = await proxy.request('/user/auth/get', {}, { method: 'GET' })
    if (res.data.data && res.data.data.id) {
        state.isSave = false
        state.model.userInfo = res.data.data
    }
}

onMounted(() => {
    getSaveInfo()
})
</script>
<style lang="scss">
page {
    background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.main {
    // margin-top: 64rpx;
    padding: 32rpx;

    &-wrap {
        height: 272rpx;
        background: #FFFFFF;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        &-title {
            height: 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #323232;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

    }

    .u-content {
        padding: 32rpx;
        @include flex(column);
        align-items: center;
        justify-content: center;

        &__circle {
            background-color: $u-success;
            @include flex;
            border-radius: 100px;
            width: 60px;
            height: 60px;
            align-items: center;
            justify-content: center;
        }

        &__normal {
            font-size: 15px;
            color: $u-success;
            margin-top: 15px;
        }
    }

    &-action {
        margin-top: 32rpx;

        ::v-deep .u-button {
            width: 480rpx;
            height: 80rpx;
            background: #F2CB51;
            border-radius: 58rpx 58rpx 58rpx 58rpx;
        }

    }
}
</style>